<template>
	<view>
		
		<!-- <view class="onebox">
			<view class="itemlist" v-for="(item,index) in list" :key="index"
			 @click="navbet(index)"  :style="{'color':index== currentindex?'#3583D5':''}">
				{{item}}
				<view v-if="index==currentindex" class="borderbox"></view>
			</view>
		</view>
		<view class="bgbox" v-if="programlist.length==0">
			<image src="../../static/bg19.png"></image>
		</view> -->
		<kong v-if="programlist.length==0"></kong>
		<view class="fox" v-for="(item,index) in programlist" :key="index" @tap.stop="Todetail(item)">
			<view class="twobox">
				<view class="oneleft">
					<image :src="item.activity_img.split(',')[0]"></image>
				</view>
				<view class="oneright">
					<view class="titone">
						<text class="itembox">{{item.activity_name}}</text>
						<!-- 活动状态 0未开始 1进行中 2已结束  status-->
						<text v-if="item.status==1" style="color: #3583D5;">进行中</text>
						<text v-if="item.status==0" style="color: #3583D5;">未开始</text>
						<text v-if="item.status==2">已结束</text>
					</view>
					<view class="tittwo">江西省科学技术馆</view>
					<view class="tittre">
						<!-- <text>招募进展:<text style="color: #555555;">{{item.comfirm_num}}/{{item.activity_num}}</text></text> -->
						<text>活动时间:<text style="color: #555555;">{{item.apply_start_time|dateFormat}}-{{item.apply_end_time|dateFormat}}</text></text>
					</view>
				</view>
			</view>
			<!-- 报名状态 0待审核 1通过 2拒绝 3申请退出 4同意退出 5拒绝退出 -->
			<view class="refuse" v-if="item.win_status==2">您已被拒绝参加该活动，感谢您的参与！</view>
			<view class="refuse" v-if="item.win_status==5">您的退出活动申请被拒绝！</view>
			<view class="trebox"  v-if="item.win_status!==2">
				<view class="butone" v-if="item.status==0&&item.win_status==0" @tap.stop="Toreturn(item)">申请退出</view>
				<view class="butone" v-if="item.status==0&&item.win_status==1" @tap.stop="Toreturn(item)">申请退出</view>
				<view class="butone" v-if="item.win_status==4" @tap.stop="toshowmsg(1)">已退出</view>
				<view class="butone" v-if="item.win_status==0" @tap.stop="toshowmsg(2)" >待审核</view>
				<view class="butone" v-if="item.win_status==3" @tap.stop="toshowmsg(2)" >退出待审核</view>
				<view class="butone" v-if="item.win_status==5" @tap.stop="toshowmsg(3)"  >退出被拒绝</view>
				<view class="buttwo" v-if="item.status==1&&item.win_status==1" @tap.stop="Tosign(item)">去打卡</view>
				<view class="buttwo" v-if="item.status==1&&item.win_status==5" @tap.stop="Tosign(item)">去打卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				list:['全部','招募中','进行中','已结束'],
				currentindex:'',
				//status等于0时为 招募中,status等于1时为进行中，status等于2时为已结束
				alllist:[],
				programlist:[],
				num:'',
				token: uni.getStorageSync('token') || '',
				// token: JSON.parse(uni.getStorageSync('token') || ''),
				// token:'o6Xw7536VjhAWeCsR8bAVeASUH34',
				// token:'o94C66ShC8y3TgYeWsgLil2P9-HM'
			}
		},
		filters:{
		            //过滤器 用于格式化时间
		            dateFormat: function(value) {           
		                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		                var year = date.getFullYear();
		                var month = ("0" + (date.getMonth() + 1)).slice(-2);
		                var sdate = ("0" + date.getDate()).slice(-2);
		                var hour = ("0" + date.getHours()).slice(-2);
		                var minute = ("0" + date.getMinutes()).slice(-2);
		                var second = ("0" + date.getSeconds()).slice(-2);
		                // 拼接
		                var result = year + "-" + month + "-" + sdate //+ "- " + hour + ":" + minute //+ ":" + second;
		                // 返回
		                return result;
		            },
		        },
		onLoad() {
			this.getnav()
			// this.getlist()
		},
		onShow() {
			this.getlist()
		},
		methods: {
			getnav() {
				// 获取手机系统信息
				const info = uni.getSystemInfoSync()
				// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
				this.statusBarHeight = info.statusBarHeight
				this.windowWidth = info.windowWidth
				// 除了h5 app mp-alipay的情况下执行
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
					.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
				// #endif
			},
			navbet(index){
				this.currentindex = index
				if(this.currentindex==0){
					this.programlist = this.alllist
				}else if(this.currentindex==1){
					//status等于0时为 招募中,status等于1时为进行中，status等于2时为已结束
					this.programlist = this.alllist.filter(item=>item.status==0)
				}else if(this.currentindex==2){
					this.programlist = this.alllist.filter(item=>item.status==1)
				}else if(this.currentindex==3){
					this.programlist = this.alllist.filter(item=>item.status==2)
				}
			},
			Toreturn(item){
				uni.showToast({
					title:'退出该活动后将不能重新加入',
					icon:'none'
				})
				uni.navigateTo({
					url:'../return_reason/return_reason?item=' + JSON.stringify(item)
				})
			},
			Tocomment(item){
				uni.navigateTo({
					url:'../comment/comment?item=' + JSON.stringify(item)
				})
			},
			Tosign(item){
				this.$http({
					url:'api/api/getSignStatus',
					data:{
						token:this.token,
						activity_id:item.id
					}
				}).then(res=>{
					this.num = res.data
					uni.navigateTo({
						url:'../sign/sign?num=' + this.num +'&id=' + item.id
					})
				})
				
			},
			toshowmsg(n){
				if(n==1){
					uni.showToast({
						title:'你已退出该活动',
						icon:'none'
					})
				}
				if(n==2){
					uni.showToast({
						title:'您的申请待审核',
						icon:'none'
					})
				}
				if(n==3){
					uni.showToast({
						title:'您的退出申请被拒绝',
						icon:'none'
					})
				}
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getlist(){
				this.$http({
					url:'api/Wechat/userApply',
					data:{
						token:this.token,
						status:''
					}
				}).then(res=>{
					this.programlist = res.data
					// this.programlist = this.alllist
				})
			},
			Todetail(item){
				uni.navigateTo({
					url:'/pages/activity/activity?id='+item.activity_id
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.bgbox{
		width: 90%;
		height: 800rpx;
		margin: 50rpx auto;
		text-align: center;
		display: flex;
		justify-content: center;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.navbar {
		margin-bottom: 20rpx;
	
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			// height: 102rpx;
			padding-bottom: 20rpx;
			background: #FFFFFF;
	
	
			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				// height: 142rpx;
				box-sizing: border-box;
	
				image {
					width: 20rpx;
					height: 31rpx;
					margin-right: 10rpx;
				}
	
				.navbar-search {
					display: flex;
					align-items: center;
					color: #000;
					// padding: 0 10px;
					width: 100%;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
	
				}
	
			}
		}
	}
	.onebox{
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		display: flex;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 86rpx;
		z-index: 19;
		// padding: 30rpx 0;
		.itemlist{
			width: 25%;
			text-align: center;
			color: #222222;
			.borderbox{
				width: 84rpx;
				height: 4rpx;
				background: linear-gradient(0deg, #449FFE, #3583D5);
				border-radius: 2rpx;
				margin: 0 auto;
			}
		}
	}
	.fox{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 24rpx;
		margin-top: 24rpx;
		.twobox{
			display: flex;
			align-items: center;
			.oneleft{
				width: 28%;
				height: 160rpx;
				border-radius: 10rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					box-shadow: 0rpx 1rpx 8rpx 0rpx rgba(31,31,31,0.1700);
					border-radius: 10rpx;
				}
			}
			.oneright{
				width: 72%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				.titone{
					font-weight: 400;
					color: #222222;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.itembox{
						width: 80%;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 500;
					}
				}
				.tittwo{
					font-size: 24rpx;
					font-weight: 400;
					color: #888888;
					margin-top: 20rpx;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.tittre{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #888888;
					margin-top: 20rpx;
				}
			}
		}
		.refuse{
			font-weight: 500;
			color: #222222;
			height: 62rpx;
			line-height: 62rpx;
			background: linear-gradient(90deg, #c4e0fd, #FFFFFF);
			// text-align: center;
			// position: absolute;
			// left: 30rpx;
			width: 94%;
			padding:0 20rpx;
			// padding: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			margin: 20rpx auto 0 auto;
			border-radius: 20rpx;
		}
		.trebox{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			font-family: PingFang SC;
			margin-top: 40rpx;
			
			.butone{
				width: 170rpx;
				height: 62rpx;
				border: 2rpx solid #999999;
				border-radius: 31rpx;
				font-weight: 500;
				color: #222222;
				line-height: 62rpx;
				text-align: center;
				margin-right: 20rpx;
			}
			.buttwo{
				width: 170rpx;
				height: 62rpx;
				border: 2rpx solid #3583D5;
				border-radius: 31rpx;
				font-weight: 500;
				color: #3583D5;
				line-height: 62rpx;
				text-align: center;
			}
		}
	}
	
	

</style>
